<template>
  <div class="surveillance-operate-page">
    <div class="page-container">
      <!-- 左侧面板 -->
      <div class="left-panel">
        <!-- 基础参数设置 -->
        <div class="section">
          <h3 class="section-title">基础参数设置</h3>
          <div class="form-grid">
            <div class="form-item">
              <label class="form-label">雷达选择:</label>
              <el-select 
                v-model="selectedRadar" 
                placeholder="请选择雷达" 
                class="form-select"
                size="small"
              >
                <el-option
                  v-for="radar in radarOptions"
                  :key="radar.value"
                  :label="radar.label"
                  :value="radar.value"
                />
              </el-select>
            </div>

            <div class="form-item">
              <label class="form-label">模式类型:</label>
              <el-select 
                v-model="modeType" 
                placeholder="请选择模式类型" 
                class="form-select"
                size="small"
              >
                <el-option
                  v-for="mode in modeOptions"
                  :key="mode.value"
                  :label="mode.label"
                  :value="mode.value"
                />
              </el-select>
            </div>

            <div class="form-item">
              <label class="form-label">距离:</label>
              <div class="input-with-unit">
                <el-input-number
                  v-model="distance"
                  :min="0"
                  :precision="0"
                  :step="100"
                  :controls="true"
                  placeholder="请输入距离"
                  class="form-input-number"
                  size="small"
                />
                <span class="unit">m</span>
              </div>
            </div>

            <div class="form-item">
              <label class="form-label">距离分辨率:</label>
              <div class="input-with-unit">
                <el-input-number
                  v-model="distanceResolution"
                  :min="0"
                  :precision="0"
                  :step="10"
                  :controls="true"
                  placeholder="请输入距离分辨率"
                  class="form-input-number"
                  size="small"
                />
                <span class="unit">m</span>
              </div>
            </div>
          </div>
        </div>

        <!-- PPI模式专用设置 -->
        <div v-if="modeType === 'PPI'" class="section">
          <h3 class="section-title">PPI模式参数</h3>
          <div class="form-grid">
            <div class="form-item">
              <label class="form-label">方位起始角:</label>
              <div class="input-with-unit">
                <el-input-number
                  v-model="azimuthStart"
                  :min="0"
                  :max="360"
                  :precision="1"
                  :controls="true"
                  placeholder="请输入方位起始角"
                  class="form-input-number"
                  size="small"
                />
                <span class="unit">°</span>
              </div>
            </div>

            <div class="form-item">
              <label class="form-label">方位结束角:</label>
              <div class="input-with-unit">
                <el-input-number
                  v-model="azimuthEnd"
                  :min="0"
                  :max="360"
                  :precision="1"
                  :controls="true"
                  placeholder="请输入方位结束角"
                  class="form-input-number"
                  size="small"
                />
                <span class="unit">°</span>
              </div>
            </div>

            <div class="form-item">
              <label class="form-label">俯仰角:</label>
              <div class="input-with-unit">
                <el-input-number
                  v-model="elevationAngle"
                  :min="0"
                  :max="90"
                  :precision="1"
                  :controls="true"
                  placeholder="请输入俯仰角"
                  class="form-input-number"
                  size="small"
                />
                <span class="unit">°</span>
              </div>
            </div>

            <div class="form-item">
              <label class="form-label">扫描步进:</label>
              <div class="input-with-unit">
                <el-input-number
                  v-model="scanStepDecimal"
                  :min="0"
                  :precision="0"
                  :controls="true"
                  placeholder="请输入扫描步进"
                  class="form-input-number"
                  size="small"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧面板 -->
      <div class="right-panel">
        <!-- 设备操作 -->
        <div class="section">
          <h3 class="section-title">设备操作</h3>
          <div class="operation-buttons">
            <el-button 
              type="primary" 
              size="small" 
              class="operation-btn"
              @click="handleOperation('initialize')"
            >
              初始化
            </el-button>
          </div>
        </div>

        <!-- 采集控制 -->
        <div class="section">
          <h3 class="section-title">采集控制</h3>
          <div class="operation-buttons">
            <el-button 
              type="success" 
              size="small" 
              class="operation-btn"
              :disabled="isCollecting"
              @click="handleStartCollect"
            >
              开始采集
            </el-button>
            <el-button 
              type="danger" 
              size="small" 
              class="operation-btn"
              :disabled="!isCollecting"
              @click="handleStopCollect"
            >
              停止采集
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import {
  stopWindLidar,windLidarInit,startWindLidar
} from '@/api/system/user'
// 雷达选择
const selectedRadar = ref('32.390648,117.050972') // 默认合肥站

// 雷达选项配置，包含坐标和对应的城市代码
const radarOptions = ref([
  { label: '合肥站', value: '32.390648,117.050972', city: 'hefei' },
  { label: '宣城站', value: '30.851,119.009', city: 'xuancheng' }
])

// 模式类型
const modeType = ref('PPI')
const modeOptions = ref([
  { label: 'PPI', value: 'PPI' },
  { label: 'DBS', value: 'DBS' }
])

// 距离设置
const distance = ref(0)

// 距离分辨率设置
const distanceResolution = ref(0)

// PPI模式专用参数
const azimuthStart = ref(0) // 方位起始角
const azimuthEnd = ref(0) // 方位结束角
const elevationAngle = ref(0) // 俯仰角
const scanStepDecimal = ref(0) // 扫描步进（整数）

// 采集状态
const isCollecting = ref(false)

// 处理设备操作
const handleOperation = async (operation) => {
  const operationMap = {
    initialize: '初始化'
  }
  
  try {
    if (operation === 'initialize') {
      await windLidarInit()
      ElMessage.success('初始化操作已执行')
      console.log('执行初始化操作')
    }
  } catch (error) {
    console.error('操作执行失败:', error)
    ElMessage.error('操作执行失败，请重试')
  }
}

// 处理开始采集
const handleStartCollect = async () => {
  // 验证必填项
  if (!modeType.value) {
    ElMessage.warning('请选择模式类型')
    return
  }
  if (!distance.value || distance.value <= 0) {
    ElMessage.warning('请输入有效的距离值')
    return
  }
  if (!distanceResolution.value || distanceResolution.value <= 0) {
    ElMessage.warning('请输入有效的距离分辨率值')
    return
  }
  
  // PPI模式额外验证
  if (modeType.value === 'PPI') {
    if (azimuthStart.value < 0 || azimuthStart.value > 360) {
      ElMessage.warning('请输入有效的方位起始角（0-360）')
      return
    }
    if (azimuthEnd.value < 0 || azimuthEnd.value > 360) {
      ElMessage.warning('请输入有效的方位结束角（0-360）')
      return
    }
    if (elevationAngle.value < 0 || elevationAngle.value > 90) {
      ElMessage.warning('请输入有效的俯仰角（0-90）')
      return
    }
  }
  
  try {
    // 构建请求参数
    let params = {
      type: modeType.value,
      maxRange: distance.value,
      rangeResolution: distanceResolution.value
    }
    
    // PPI模式额外参数
    if (modeType.value === 'PPI') {
      params.azimuthStart = azimuthStart.value
      params.azimuthEnd = azimuthEnd.value
      params.elevation = elevationAngle.value
      params.angleResolution = scanStepDecimal.value
    }
    
    // 调用开始采集接口
    await startWindLidar(params)
    isCollecting.value = true
    ElMessage.success('开始采集成功')
    console.log('开始采集', params)
  } catch (error) {
    console.error('开始采集失败:', error)
    ElMessage.error('开始采集失败，请重试')
  }
}

// 处理停止采集
const handleStopCollect = async () => {
  try {
    await stopWindLidar()
    isCollecting.value = false
    ElMessage.success('停止采集成功')
    console.log('停止采集')
  } catch (error) {
    console.error('停止采集失败:', error)
    ElMessage.error('停止采集失败，请重试')
  }
}
</script>

<style scoped lang="scss">
.surveillance-operate-page {
  height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #cbd5e1 100%);
  padding: 24px;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
      radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="dots" width="60" height="60" patternUnits="userSpaceOnUse"><circle cx="30" cy="30" r="1" fill="rgba(148,163,184,0.1)"/></pattern></defs><rect width="100%" height="100%" fill="url(%23dots)"/></svg>');
    opacity: 0.6;
    pointer-events: none;
  }
}

.page-container {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  height: calc(100vh - 48px);
  position: relative;
  z-index: 1;
  overflow-y: auto;
  padding-right: 8px;
  
  &::-webkit-scrollbar {
    width: 8px;
  }
  
  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
  }
  
  &::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    
    &:hover {
      background: rgba(0, 0, 0, 0.3);
    }
  }
}

.left-panel,
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: fit-content;
}

.section {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.5);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 1);
  }
  
  .section-title {
    font-size: 16px;
    color: #1a202c;
    margin: 0 0 16px 0;
    font-weight: 700;
    position: relative;
    padding-bottom: 10px;
    
    &::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 50px;
      height: 3px;
      background: linear-gradient(90deg, #667eea, #764ba2);
      border-radius: 2px;
    }
  }
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  
  .form-label {
    font-size: 13px;
    color: #4a5568;
    font-weight: 600;
    letter-spacing: 0.3px;
    min-width: 100px;
    flex-shrink: 0;
    text-align: right;
  }
  
  .form-select {
    width: 200px;
    flex-shrink: 0;
  }
  
  .form-input-number,
  .input-with-unit {
    width: 200px;
    flex-shrink: 0;
  }
}

.form-select {
  :deep(.el-input__wrapper) {
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    padding: 6px 12px;
    font-size: 13px;
    min-height: 36px;
    background: #ffffff;
    transition: all 0.3s ease;
    
    &:hover {
      border-color: #3b82f6;
      box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
    }
    
    &.is-focus {
      border-color: #3b82f6;
      box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    }
  }
  
  :deep(.el-input__inner) {
    font-size: 13px;
    color: #2d3748;
    font-weight: 500;
  }
}

.input-with-unit {
  display: flex;
  align-items: center;
  gap: 8px;
  
  .form-input-number {
    width: 100%;
    
    :deep(.el-input__wrapper) {
      border-radius: 6px;
      border: 1px solid #e2e8f0;
      padding: 6px 10px;
      font-size: 13px;
      min-height: 36px;
      background: #ffffff;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
      }
      
      &.is-focus {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
      }
    }
    
    :deep(.el-input__inner) {
      font-size: 13px;
      color: #2d3748;
      font-weight: 500;
    }
  }
  
  .unit {
    font-size: 13px;
    color: #718096;
    font-weight: 600;
    min-width: 18px;
    flex-shrink: 0;
  }
}

.operation-buttons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  
  .operation-btn {
    width: 100%;
    height: 48px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 10px;
    border: none;
    color: white;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s;
    }
    
    &:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      
      &::before {
        left: 100%;
      }
    }
    
    &:active:not(:disabled) {
      transform: translateY(0);
    }
    
    &:disabled {
      opacity: 0.5;
      cursor: not-allowed;
    }
    
    // 默认样式（初始化按钮）
    &:not(.el-button--success):not(.el-button--danger) {
      background: linear-gradient(135deg, #3b82f6, #1d4ed8);
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #2563eb, #1e40af);
        box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
      }
    }
    
    // 成功按钮样式（开始采集）
    &.el-button--success {
      background: linear-gradient(135deg, #10b981, #059669);
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #059669, #047857);
        box-shadow: 0 6px 20px rgba(16, 185, 129, 0.3);
      }
    }
    
    // 危险按钮样式（停止采集）
    &.el-button--danger {
      background: linear-gradient(135deg, #ef4444, #dc2626);
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #dc2626, #b91c1c);
        box-shadow: 0 6px 20px rgba(239, 68, 68, 0.3);
      }
    }
  }
}

// 响应式设计
@media (max-width: 1200px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .page-container {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  
  .left-panel,
  .right-panel {
    gap: 20px;
  }
  
  .form-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .surveillance-operate-page {
    padding: 16px;
  }
  
  .page-container {
    gap: 20px;
  }
  
  .section {
    padding: 20px;
  }
  
  .form-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .operation-buttons {
    gap: 12px;
    
    .operation-btn {
      height: 48px;
      font-size: 15px;
    }
  }
}

@media (max-width: 480px) {
  .section {
    padding: 16px;
  }
  
  .section-title {
    font-size: 18px;
  }
}
</style>